<!DOCTYPE html>
<html>
<head>
    <title>Fig. 2.1 - Gas in a Cylinder</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: white;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="750" height="450"></canvas>
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');

        // Helper function to draw an arrowhead at a specific point with a given angle and size
        function drawArrowhead(ctx, x, y, angle, size) {
            ctx.save();
            ctx.translate(x, y);
            ctx.rotate(angle);
            ctx.beginPath();
            ctx.moveTo(0, 0);
            ctx.lineTo(-size, -size / 2.5);
            ctx.moveTo(0, 0);
            ctx.lineTo(-size, size / 2.5);
            ctx.stroke();
            ctx.restore();
        }

        // --- Global styles ---
        ctx.lineWidth = 2;
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        const FONT_SIZE = 22;
        ctx.font = `${FONT_SIZE}px sans-serif`;

        // --- 1. Draw Cylinder ---
        const cylinderColor = '#e0e0e0';
        ctx.fillStyle = cylinderColor;
        // Top wall
        ctx.fillRect(200, 100, 415, 20);
        // Bottom wall
        ctx.fillRect(200, 280, 415, 20);
        // Right wall (end cap)
        ctx.fillRect(600, 100, 20, 200);

        // --- 2. Draw Piston ---
        ctx.fillStyle = 'white';
        // Piston Head
        const pistonX = 300;
        const pistonY = 120;
        const pistonW = 25;
        const pistonH = 160;
        ctx.fillRect(pistonX, pistonY, pistonW, pistonH);
        ctx.strokeRect(pistonX, pistonY, pistonW, pistonH);

        // Piston Rod
        ctx.beginPath();
        const rodY1 = 190;
        const rodY2 = 210;
        const rodStartX = 300;
        const rodEndX = 80;
        const jaggedDip = 15;
        
        ctx.moveTo(rodStartX, rodY1);
        ctx.lineTo(rodEndX, rodY1);
        ctx.lineTo(rodEndX - jaggedDip, (rodY1 + rodY2) / 2);
        ctx.lineTo(rodEndX, rodY2);
        ctx.lineTo(rodStartX, rodY2);
        ctx.stroke();

        // --- 3. Draw Gas Molecule and Path ---
        // Molecule initial position
        const moleculeX = 500;
        const moleculeY = 240;
        
        // Path points
        const impactX = pistonX + pistonW; // 325
        const impactY = 215;
        const reboundX = 450;
        const reboundY = 170;

        // Draw molecule as a dot
        ctx.beginPath();
        ctx.arc(moleculeX, moleculeY, 5, 0, 2 * Math.PI);
        ctx.fillStyle = 'black';
        ctx.fill();

        // Draw path lines
        ctx.beginPath();
        ctx.moveTo(moleculeX, moleculeY);
        ctx.lineTo(impactX, impactY);
        ctx.moveTo(impactX, impactY);
        ctx.lineTo(reboundX, reboundY);
        ctx.stroke();

        // Draw arrows on paths
        const arrowSize = 15;
        // Arrow on incoming path
        const incomingAngle = Math.atan2(impactY - moleculeY, impactX - moleculeX);
        const arrow1X = impactX * 0.7 + moleculeX * 0.3;
        const arrow1Y = impactY * 0.7 + moleculeY * 0.3;
        drawArrowhead(ctx, arrow1X, arrow1Y, incomingAngle, arrowSize);

        // Arrow on outgoing path
        const outgoingAngle = Math.atan2(reboundY - impactY, reboundX - impactX);
        const arrow2X = reboundX * 0.7 + impactX * 0.3;
        const arrow2Y = reboundY * 0.7 + impactY * 0.3;
        drawArrowhead(ctx, arrow2X, arrow2Y, outgoingAngle, arrowSize);


        // --- 4. Draw "movement of piston" arrow ---
        const moveArrowY = 60;
        const moveArrowStartX = 280;
        const moveArrowEndX = 100;
        ctx.beginPath();
        ctx.moveTo(moveArrowStartX, moveArrowY);
        ctx.lineTo(moveArrowEndX, moveArrowY);
        ctx.stroke();
        drawArrowhead(ctx, moveArrowEndX, moveArrowY, Math.PI, 20); // Math.PI for left direction

        // --- 5. Add Labels ---
        ctx.fillStyle = 'black';

        // "movement of piston" label
        ctx.textAlign = 'left';
        ctx.fillText('movement', 110, moveArrowY - 15);
        ctx.fillText('of piston', 110, moveArrowY + 15);

        // "cylinder" label
        ctx.fillText('cylinder', 630, 90);
        ctx.beginPath();
        ctx.moveTo(650, 95);
        ctx.lineTo(610, 115);
        ctx.stroke();

        // "piston" label
        ctx.fillText('piston', 200, 310);
        ctx.beginPath();
        ctx.moveTo(235, 305);
        ctx.lineTo(pistonX, 225);
        ctx.stroke();
        
        // "gas molecule" label
        ctx.fillText('gas', 530, 300);
        ctx.fillText('molecule', 530, 300 + FONT_SIZE);
        ctx.beginPath();
        ctx.moveTo(540, 295);
        ctx.lineTo(moleculeX + 5, moleculeY + 5);
        ctx.stroke();

        // --- 6. Add Figure Caption ---
        ctx.font = `bold ${FONT_SIZE}px sans-serif`;
        ctx.textAlign = 'center';
        ctx.fillText('Fig. 2.1', canvas.width / 2, 400);

    </script>
</body>
</html>